<template>
  <Dialog v-model="dialogVisible" title="导出" width="400">
    <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="导出模板类型" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="导出模板类型"
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in orderType.list"
                :key="dict.id"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="">
            <div class="el-upload__tip text-center">
          <el-link
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            type="primary"
            @click="handleExport"
          >
            下载模板
          </el-link>
        </div>
          </el-form-item>
      </el-form>
   
      <!-- <template #tip> -->
        
      <!-- </template> -->
    <!-- <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template> -->
  </Dialog>
</template>
<script lang="ts" setup>
import download from '@/utils/download'
import * as orderApi from '@/api/hcxly/order/Index'

defineOptions({ name: 'orderOutportForm' })

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: undefined,
  orderDateReq: [],
  operator : undefined,
  status : undefined
})
// const formLoading = ref(false) // 表单的加载中
// const uploadRef = ref()

// const fileList = ref([]) // 文件列表
const orderType = ref([]) // 导入模板类型
// const outType = ref()

/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  getOrderType()
  // resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const querytype = reactive({
  pageNo: 1,
  pageSize: 100,
  dictType: 'order_type'
})
/** 查询导入模板类型 */
const getOrderType = async () => {
  orderType.value = await orderApi.getStatus(querytype)
  // console.log(orderType.value)
}

const exportLoading = ref(false) // 导出的加载中
  /** 导出按钮操作 */
  const handleExport = async () => {
    try {
      // 导出的二次确认
      // await message.exportConfirm()
      // 发起导出
      exportLoading.value = true
      const data = await orderApi.exportSupplier(queryParams.status)
      download.excel(data, '生产订单导出模板.xls')
      dialogVisible.value = false
    } catch {
    } finally {
      exportLoading.value = false
    }
  }

</script>
